<template>
  <div class="p-6">
    <div class="flex justify-between items-center mb-6">
      <div>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">文章管理</h1>
        <p class="text-gray-600 dark:text-gray-400 mt-2">管理博客文章和内容</p>
      </div>
      <button class="btn btn-primary flex items-center gap-2">
        <Icon name="heroicons:plus" class="w-5 h-5" />
        创建文章
      </button>
    </div>

      <!-- 文章列表 -->
      <div class="space-y-4">
        <div
          v-for="article in articles"
          :key="article.id"
          class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6"
        >
          <div class="flex justify-between items-start">
            <div class="flex-1">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white">{{ article.title }}</h3>                                                          
              <p class="text-gray-600 dark:text-gray-400 mt-2 line-clamp-2">{{ article.excerpt }}</p>                                                           
              <div class="flex items-center gap-4 mt-3 text-sm text-gray-500 dark:text-gray-400">                                                               
                <span>👁️ {{ article.views }}</span>
                <span>❤️ {{ article.likes }}</span>
                <span>{{ formatDate(article.createdAt) }}</span>
                <span
                  :class="{
                    'text-green-600': article.status === 'published',
                    'text-yellow-600': article.status === 'draft',
                    'text-gray-600': article.status === 'archived',
                  }"
                >
                  {{ getStatusLabel(article.status) }}
                </span>
              </div>
            </div>
            <div class="flex gap-2 ml-4">
              <button class="text-blue-600 hover:text-blue-700">编辑</button> 
              <button class="text-red-600 hover:text-red-700">删除</button>   
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div v-if="totalPages > 1" class="flex justify-center items-center gap-2 mt-8">
        <button
          @click="prevPage"
          :disabled="currentPage === 1"
          class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
        >
          上一页
        </button>
        
        <div class="flex gap-2">
          <button
            v-for="page in totalPages"
            :key="page"
            @click="goToPage(page)"
            :class="[
              'px-4 py-2 rounded-lg border',
              currentPage === page
                ? 'bg-blue-600 text-white border-blue-600'
                : 'border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
            ]"
          >
            {{ page }}
          </button>
        </div>
        
        <button
          @click="nextPage"
          :disabled="currentPage === totalPages"
          class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
        >
          下一页
        </button>
      </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

definePageMeta({
  layout: 'admin',
  middleware: ['auth'],
})

const $api = useNuxtApp().$api

const articles = ref<any[]>([])
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)
const totalPages = ref(0)

onMounted(() => {
  loadArticles()
})

const loadArticles = async () => {
  try {
    const result = await $api('/articles', { 
      params: { 
        page: currentPage.value,
        limit: pageSize.value 
      } 
    }) as any    
    articles.value = result.data
    total.value = result.total
    totalPages.value = result.totalPages || Math.ceil(result.total / result.limit)
  } catch (error) {
    console.error('加载文章失败:', error)
  }
}

const goToPage = (page: number) => {
  currentPage.value = page
  loadArticles()
}

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    loadArticles()
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    loadArticles()
  }
}

const getStatusLabel = (status: string) => {
  const labels: any = {
    draft: '草稿',
    published: '已发布',
    archived: '已归档',
  }
  return labels[status] || status
}

const formatDate = (date: string) => {
  return new Date(date).toLocaleDateString('zh-CN')
}
</script>




